<template>
  <div id="sider">
    <ul>
      <li
        class="sider1"
        v-for="(item, index) in arrList"
        :key="index"
        @click="dianji(item.id, item.url)"
        :style="{ backgroundColor: item.flag ? '#428bca' : '' }"
      >
        {{ item.name }}
      </li>
    </ul>
  </div>
</template>

<script>
import axios from "axios";
export default {
  name: "sider",
  data() {
    return {
      tabPosition: "left",
      arrList: [],
      msg: 0,
    };
  },
  created() {
    axios.get("/siderbar.json").then((res) => {
      console.log("res", res);
      this.arrList = res.data.sider;
    });
  },
  methods: {
    dianji(id, url) {
      this.arrList.forEach((res) => (res.flag = false));
      this.arrList.find((r) => r.id == id).flag = true;
      this.$router.push({ name: "routerPage", params: { url: url } });
    },
  },
};
</script>

<style scoped>
ul {
  width: 250px;
  height: 490px;
  display: flex;
  margin: 0;
  padding: 0;
  flex-direction: column;
}

ul li {
  list-style: none;
  height: 80px;
  width: 100%;
  color: white;
  text-align: center;
  line-height: 70px;
  cursor: pointer;
  background-color: #44b7ec;
}
li:first-child {
  border-radius: 10px 10px 0 0;
}
li:last-child {
  border-radius: 0 0 10px 10px;
}
</style>